<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>分店管理-场地详情</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/project_set.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
</head>
<script>
	$(document).ready(function() {
		var equipment=$("#equipment").val();
		$("#bai").hide();
		$("#dian").hide();
		$("#huan").hide();
		if(equipment.indexOf(1)!=-1){
			$("#bai").show();
		}
		if(equipment.indexOf(2)!=-1){
			$("#dian").show();
		}
		if(equipment.indexOf(3)!=-1){
			$("#huan").show();
		}
	});
	
</script>
<style>
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #F5F5F5;
    cursor: pointer;
}
::-webkit-scrollbar-thumb {
    background-color: #a2a2a2;
    border-radius: 2px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #ffffff;
}
body,html{
	height: auto; 
}
.date-input{
	padding-left:30px;
    background: url(/images/icon/rili_icon.png) no-repeat 10px center !important;
}
</style>
<body>
<input type="hidden" id="equipment" name="equipment" th:value="${record.equipment}" />
<input type="hidden" id="id" name="id" th:value="${record.id}" />
<input type="hidden" id="reserveStartDate" name="reserveStartDate" th:value="${set.reserveStartDate}" />
<input type="hidden" id="reserveEndDate" name="reserveEndDate" th:value="${set.reserveEndDate}" />
<input type="hidden" id="startTime" name="startTime" value=""/>
<input type="hidden" id="endTime" name="endTime" value=""/>
<input type="hidden" id="bookDate" name="bookDate" >
	<div class="nav-section-container">
		<header class="nav-header">
			<div class="nav-section-header-title">
				<span th:text="${record.name}"></span>
				<div class="f-right">
				    <div class="kb_dropdown">
						<a class="kb_dropdown__trigger " href="#dropdown-trigger">
							<button class="layui-btn layui-btn-radius layui-btn-normal" id="">
								<i class="layui-icon">&#xe625;</i>更多
							</button>
						</a>
						<div class="kb_dropdown__content" style="left:-14px">
							<div class="user-dropdown">
								<a class="edit_Team">编辑</a>
								<a class="del_Team">删除</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="meeting-room-imgs">
				<img th:src="${record.attachment!=null}? |${record.attachment.filePath}${record.attachment.id}${record.attachment.fileType}|:'/images/meeting-room-default.png'">
			</div>
			<div class="mag-top-20 color-nine">
				<div class="meeting-room-message">
					<span th:text="|${record.floor}层楼|"></span>
				</div>
				<div class="meeting-room-message">
					<i class="icon-account_circle"></i><span style="margin-left: 3px;" th:text="|${record.peopleNumber}人|"></span>
				</div>
				<div class="meeting-room-message">
					<i class="icon-close2"></i><span th:text="${record.lock==1}? '有锁':'无锁'"></span>
				</div>
				<div class="meeting-room-message">
					<span th:text="|总面积${record.area}平方米|"></span>
				</div>
				<div class="meeting-room-message">
					<span th:text="${record.checkPrice==null} ? '0':${record.checkPrice}"></span>元/小时
				</div>
				<div class="meeting-room-message">
					<span th:text="|朝向:${record.orientation}|"></span>
				</div>
			 </div>
			 <div class="color-nine" style="margin-top: 10px;">
				 <span style="margin-right: 10px;" id="bai"><i class="layui-icon layui-icon-layer"></i>白板</span>
				 <span style="margin-right: 10px;" id="dian"><i class="layui-icon layui-icon-chart-screen "></i>电视</span>
			 	 <span style="margin-right: 10px;" id="huan"><i class="layui-icon layui-icon-carousel"></i>幻灯</span>
			 </div>
		</header>
		<div class="nav-section-content-container" style="padding-top:30px;">
			<div style="width: 100%; height: 100%; position: relative;">
				<div style="overflow-x: auto; overflow-y: hidden; margin-top: 15px; margin-left: 140px;">
					<div style= "height: 30px;">
						<div class="line-time"></div>
					</div>
					<div class="meeting-popup"></div>
					<div class="meeting-title-box">

					</div>
					<div class="timeline-box" style="padding-top: 0px;">
					
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
$(function(){
	setHeight()
	layui.use(['element','layer','form'], function(){
		var form = layui.form;
	})
	var sh=true;
	$(".kb_dropdown__trigger").on("click",function(){
		if(sh){
			$(".kb_dropdown__content").addClass("show").removeClass("hide");
			sh=false;
		}else{
			$(".kb_dropdown__content").addClass("hide").removeClass("show");
			sh=true;
		}
		
	})
	$(".edit_Team").on("click",function(){
		var id=$("#id").val();
		parent.parent.parent.layer.open({
			  type: 2, 
			  title:"修改场地",
			  area: ['700px','90%'],
		      shade: [0.6, '#010101'],
		      zIndex:800,
			  content:"/app/projectField/edit/"+id , //这里content是一个普通的String
			  end: function () {
				  location.reload();
		      }
		});
	})
	$(".del_Team").on("click",function(){
		var id=$("#id").val();
		parent.parent.parent.layer.confirm('确认要删除吗，删除后不能恢复', function(index){
	    	//发送删除请求
	    	$.post("/app/projectField/delete",{id:id},function(res){
	    		parent.parent.parent.layer.msg(res.msg);
	    		parent.parent.parent.layer.close(index);
	    		
	    		var iframeSrc='/app/projectField/list';
	    		var iframe = document.createElement('iframe');//动态创建iframe，禁止iframe的src回退；
	    	    iframe.src = iframeSrc;
	    	    iframe.width = '100%';
	    	    iframe.height = '100%';
	    	    iframe.id = 'iframeSet';
	    	    parent.$("#iframeSet-wrap").html($(iframe));
	    	    
	        },"json");
	  	});	
	})
	//点击小方块，预约时间
    $(".timeline-box").on("click",".time-grid",function(){
    	var index=$(this).index()/2;
    	var fieldId=$(this).attr("value");
    	var date=$(this).attr("data-date");
    	$("#bookDate").val(date);
    	var projectId=parent.parent.$("#projectId").val();
    	if((index+"").indexOf(".") != -1){
    		var time0=(index+"").split(".")[0];
    		$("#startTime").val(time0+":30");
    		$("#endTime").val((time0*1+1)+":30");
    	}else{
    		$("#startTime").val(index+":00");
    		$("#endTime").val((index+1)+":00");
    	}
    	
    	if($(this).hasClass('past-tense')||$(this).hasClass('meeting-block_disabled')){
    		return false;
    	}else{
    		var index=$(this).index()/2;
    		parent.parent.parent.layer.open({
   			  type: 2, 
			  title:['预约&nbsp;&nbsp;新场地',"font-size:18px"],
			  area: ['700px',"500px"],
			  offset: '98px',
		      shade: [0.6, '#010101'],
		      zIndex:800,
			  content:"/app/projectFieldTeam/add/"+projectId+"_"+fieldId, 
			  end: function () {
				  $('.timeline-box').html("");
				  getLateWeek();
				  
		      }
    		})
    	}
    })
	//点击预约色块
	var isFirst = true;
	$('.timeline-box').on("click",".meeting-order",function(){
		var myDate = new Date();
		year=myDate.getFullYear(),//获取当前年
		month=myDate.getMonth()+1,//获取当前月
		date1=myDate.getDate(),//获取当前日
		hours=myDate.getHours(),
		minutes=myDate.getMinutes();
		var shi=year+"-"+p(month)+"-"+p(date1);
		var hm=hours+":"+minutes;
		var id = $(this).attr("value");
		var fieldName="",state="未开始",contacts="",telephone="",startDate="",startTime="",endTime="";
		var left=$(this).offset().left,top=$(this).offset().top-322;
		$.post("/app/projectFieldTeam/selFieldTeam/"+id, function(result) {
			if(result.team!=null){
				fieldName=result.team.fullName;
			}
			contacts=result.contacts;
			telephone=result.telephone;
			startDate=result.bookStartDate;
			startTime=result.startTime;
			endTime=result.endTime;
			
			var startDate1 = new Date(result.bookStartDate.replace("-", "/").replace("-", "/"));
			var endDate1 = new Date(shi.replace("-", "/").replace("-", "/"));
			if(endDate1.getTime()==startDate1.getTime()){
				
				if(CompareDate(hm,result.startTime)&&CompareDate(result.endTime,hm)){
					state="进行中";
				}else if(CompareDate(hm,result.startTime)){
					state="已结束";
				}else if(CompareDate(result.endTime,hm)){
					state="未开始";
				}
				
			}else if(endDate1.getTime()>startDate1.getTime()){
				state="已结束";
			}
			var meetingPopup=`<header class="meeting-header clearfix">`
								+`<h2 class="header-title">`
									+`<span class="t-over" style="max-width: 150px;font-size:18px;color:#666">`+fieldName+`</span><br>`
									+`<span class="badge progress-upcoming">`+state+`</span>`
								+`</h2>`
								+`<i class="layui-icon layui-icon-close icon-cancel" onclick="closePopup(this)"></i>`
							+`</header>`
							+`<ul class="subscribe-details">`
								+`<li><i class="layui-icon layui-icon-username"></i><span>`+contacts+`</span></li>`
								+`<li><i class="layui-icon layui-icon-cellphone"></i><span>`+telephone+`</span></li>`
								+`<li><i class="layui-icon layui-icon-log"></i><span>`+startDate+`&nbsp;&nbsp;`+startTime+`-`+endTime+`</span></li>`
							+`</ul>`
							+`<footer class="meeting-footer">`
								+`<button class="layui-btn layui-btn-normal layui-btn-sm btn-bg" onclick=delOrder("`+result.id+`",this)>取消预约</button>`
							+`</footer>`;
			$('.meeting-popup').html(meetingPopup).css({'top': top+'px', 'left': left+'px'})
			if(isFirst){
				setHeight(314);
				$('html').css("height","100%");
			    $('body').css("height","100%");	
			    isFirst = false;
			}	
		}, 'json');
	})
	//渲染最近一星期的时间
	var lateWeek=getLateWeek(),nowd=getMonDate().nowd;
	var str='';
	for(var i=0;i<lateWeek.length;i++){
		
		var a=lateWeek[i].split('-');
		if(a[1]==nowd){
			str+=`<div class="line-date">`
					+`<span class="week" style="color: rgb(239, 112, 112);">`+a[1]+`</span><span class="day" style="color: rgb(239, 112, 112);">`+a[0]+`</span>`
				 +`</div>`
		}else{
			str+=`<div class="line-date">`
					+`<span class="week">`+a[1]+`</span><span class="day">`+a[0]+`</span>`
				 +`</div>`
		}
		
	}
	$(".meeting-title-box").html(str);	
})
function renderTimeline(data){
	var start=$("#reserveStartDate").val();
	var end=$("#reserveEndDate").val();
	//添加小方块	
	//添加linetime里面的内容
	var con="";
	var linetime='';
	var setStartTime=start*2,
		setEndTime=end*2,
		currentTime=parseInt(getnow().allMinutes/30);
	var myDate = new Date();
	year=myDate.getFullYear(),//获取当前年
	month=myDate.getMonth()+1,//获取当前月
	date1=myDate.getDate();//获取当前日
	var shi=year+"-"+p(month)+"-"+p(date1);

	//添加linetime里面的内容
	var linetime='';
	for(var i=0;i<25;i++){
		if(i<10){
			i="0"+i;
		}
		linetime+='<div class="time-quantum">'+i+'</div>';
	}
	$('.line-time').html(linetime);
	setHeight()
	
	var arr=[];
		var startDate = new Date(data.replace("-", "/").replace("-", "/"));
		var endDate = new Date(shi.replace("-", "/").replace("-", "/"));
		//当前时间分割红线
		var orderArr=getArr($("#id").val(),data);
		
		if(orderArr){
			var orderRes=orderTimeRender(orderArr);
		}else{
			orderArr=[];
		}
		
		//添加line-box
		var linebox="";
			linebox+='<div class="line-box">';
			for(var i=0;i<48;i++){
				if(startDate.getTime()==endDate.getTime()){//当天
					if(i<setStartTime||i>setEndTime){
						linebox+='<div class="time-grid meeting-block_disabled"></div>';
					}
					if(i<currentTime&&i>=setStartTime){
						linebox+='<div class="time-grid past-tense"></div>';
					}
					if(i>=currentTime&&i<=setEndTime){
						linebox+='<div class="time-grid" value="'+$("#id").val()+'" data-date="'+data+'"></div>';
					}
				}else if(startDate.getTime()>endDate.getTime()){//今天之后
					if(i<setStartTime||i>setEndTime){
						linebox+='<div class="time-grid meeting-block_disabled"></div>';
					}else {
						linebox+='<div class="time-grid" value="'+$("#id").val()+'" data-date="'+data+'"></div>';
					}
				}else if(startDate.getTime()<endDate.getTime()){//今天之前
					if(i<setStartTime||i>setEndTime){
						linebox+='<div class="time-grid meeting-block_disabled"></div>';
					}else {
						linebox+='<div class="time-grid past-tense"></div>';
					}
				} 
			}
			linebox+='</div>';
		
		//if(j==2){
			for(var n=0;n<orderRes.length;n++){
				linebox+='<div value="'+orderRes[n].id+'" class="meeting-status meeting-order" style="left:'+orderRes[n].orderleft+'px; width:'+orderRes[n].orderWidth+'px; background-color: rgb(128, 164, 241);z-index: 9;"></div>';
			}
		//}
		
	$('.timeline-box').append($(linebox));
	setHeight()
}
function getArr(fieldId,date){
	var arr=[];
	var url="/app/projectFieldTeam/listdata";
	jQuery.ajax({
        type:"post",
        async:false,
        url:url,
        dataType:"json",
        data:{'params[fieldId]':fieldId,'params[startDate]':date},
        success:function(data){
        	for (var i = 0; i < data.data.length; i++) {
        		
        		arr.push(data.data[i].start+"-"+data.data[i].end+"-"+data.data[i].id);
        	}
        }
    })
    return arr;
}
//获取星期一的时间
function getMonDate(){
	var d=new Date(),now=new Date().getTime();
	day=d.getDay(),
	date=d.getDate();
	if(day==1)
	return d;
	if(day==0)
	//d.setDate(date-6);
	d=new Date(now-86400000*6);
	else
	d.setDate(date-day+1);
	//d=new Date(date)
	var weekday=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
	return {
		"d":d,
		'nowd':weekday[day]
	};
}
//获取星期几
function getDayName(day){
	var day=parseInt(day);
	if(isNaN(day) || day<0 || day>6)
	return false;
	var weekday=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
	return weekday[day];
}
//获取一星期内的时间数组
function getLateWeek(){
	var d=getMonDate().d;
	timeChuo=getMonDate().d.getTime();
	
	var arr=[];
	for(var i=0; i<7; i++){
		var newTime=new Date(timeChuo),
			y=newTime.getFullYear(),
			m=newTime.getMonth()+1,
			date=newTime.getDate(),
			day=newTime.getDay(),
			shi=y+"-"+p(m)+"-"+p(date);
		renderTimeline(shi);
			
		arr.push(m+'月'+date+'日 -'+getDayName(day));
		timeChuo+=86400000;
	}
	return arr;
}
//预约时间段的匹配  var orderArr=['19,1-20,2','21,2-22,1'];
function orderTimeRender(orderArr){
	var orderRes=[];
	for(var i=0;i<orderArr.length;i++){
		var parame=orderArr[i].split("-");
		for(var j=0;j<parame.length;j++){
			//计算时间段
			var orderSval=parame[0].split(',')[0],
			orderSval2=parame[0].split(',')[1],
			orderEval=parame[1].split(',')[0],
			orderEval2=parame[1].split(',')[1],
			orderleft=(orderSval*2+(orderSval2-1))*33,
			orderWidth=((orderEval-orderSval)*2+(orderEval2-orderSval2))*33;
			//判断时间预约段的状态
			var allMinutes=getnow().allMinutes;
			var startMinutes=orderSval*60+(orderSval2-1)*30,
			endMinutes=orderEval*60+(orderEval2-1)*30,
			stateOrder="";
			if(allMinutes>endMinutes){
				stateOrder="progress-ended"
			}else if(allMinutes<startMinutes){
				stateOrder="progress-upcoming"
			}else{
				stateOrder="progress-proceeding"
			}
		}
		orderRes.push({"orderleft":orderleft,"orderWidth":orderWidth,"stateOrder":stateOrder,"id":parame[2]})
	}
	return orderRes;
}
function getnow(){
	var myDate = new Date();
	year=myDate.getFullYear(),//获取当前年
	month=myDate.getMonth()+1,//获取当前月
	date=myDate.getDate(),//获取当前日
	hours = myDate.getHours(), //截取小时 
	minutes = myDate.getMinutes(), //截取分钟
	allMinutes=hours*60+minutes;//过了多少分钟；
	return {
			year:year,
			month: month,
			date: date,
			hours:hours,
			allMinutes:allMinutes
	};
}
function setHeight(){
    var h = document.body.clientHeight;
    window.parent.setiframeWrap(h);
}
function closePopup(obj){
	$(obj).parent().parent('.meeting-popup').html('');
}
function p(s) {
    return s < 10 ? '0' + s: s;
}
function CompareDate(t1,t2){
	var date = new Date();
	var a = t1.split(":");
	var b = t2.split(":");
	return date.setHours(a[0],a[1]) > date.setHours(b[0],b[1]);
	}
</script>
</html>